<template>
  <div>
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" src="../../assets/images/logo.png" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="#fff" @click="push" />
      </template>
    </van-nav-bar>
    <van-tabs animated sticky offset-top="1.2266rem" v-model="i">
      <van-tab
        :title="itm.name"
        v-for="itm in List"
        :key="itm.id"
        :name="itm.id"
      >
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="add(true)"
            offset="50"
            :immediate-check="false"
          >
            <ArticleList :obj="arr" @Sele='onSele' />
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <van-icon name="plus" @click="show=true" size="0.5rem" class="moreChannels"/>
    <van-popup v-model="show"><ChannelEdit :arr='List' @csloe="show=false" @aee='Aeefn' @aqq='aqq' @all='all'/></van-popup>
  </div>
</template>

<script>
import { getUserChannelAPI, getArticlesListAPI, PUTchannels } from '../../api/home'
import ArticleList from './ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
import { Toast } from 'vant'
export default {
  name: 'Home',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      List: [],
      i: 0,
      isLoading: false,
      arr: [],
      loading: false,
      finished: false,
      nextTime: undefined,
      show: false
    }
  },
  methods: {
    push () {
      this.$router.push({
        path: '/search'
      })
    },
    all (i) {
      this.i = i
      this.show = false
    },
    aqq (obj) {
      this.List.push(obj)
    },
    Aeefn (id) {
      const index = this.List.findIndex(itm => itm.id === id)
      this.List.splice(index, 1)
    },
    onSele (i) {
      this.arr.splice(i, 1)
      if (this.arr.length === 5) {
        this.add(true)
      }
    },
    async add (flag = false) {
      const resp = await getArticlesListAPI({ id: this.i, timestamp: this.nextTime })
      if (resp.data.pre_timestamp === null) {
        this.finished = true
        return
      }
      this.nextTime = resp.data.pre_timestamp
      if (flag) {
        this.arr = [...this.arr, ...resp.data.results]
        this.loading = false
        return
      }
      this.arr = resp.data.results
      // console.log(resp)
    },
    onRefresh () {
      this.finished = false
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.add()
      }, 1000)
    }
  },
  async created () {
    const res = await getUserChannelAPI()
    this.List = res.data.channels
    this.add()
  },
  watch: {
    i () {
      this.nextTime = undefined
      this.isLoading = this.loading = this.finished = false
      this.add()
    },
    List (newval) {
      const channels = newval.reduce((sum, obj, index) => {
        const itm = {
          id: obj.id,
          seq: index++
        }
        if (itm.id !== 0) {
          sum.push(itm)
        }
        return sum
      }, [])
      PUTchannels({
        channels
      })
    }
  }

}
</script>

<style lang="less" scoped>
.van-popup--center{
  width: 100%;
  height: 100%;
}
.logo {
  width: 100px;
  height: 30px;
}
/* tab内容距离tab导航的距离 */
/deep/ .van-tabs__content {
  padding-top: 44px;
}
/* // 设置 tabs 容器的样式 */
/deep/ .van-tabs__wrap {
  padding-right: 10px;
  background-color: #fff;
}

/* // 设置小图标的样式 */
.moreChannels {
  position: fixed;
  top:57px;
  right: 8px;
  padding: 0 5px;
  z-index: 999;
  background-color: #fff;
}
</style>
